<!-- 验证组件 - 随机生成小计算量算式进行人机验证 -->
<template>
  <div class="verification-container">
    <!-- 算式展示区域 -->
    <div class="equation-display">
      <span class="equation">{{ equation }}</span>
      <button v-if="showRefresh" class="refresh-btn" @click="generateNewEquation" title="刷新算式">
        🔄
      </button>
    </div>
    
    <!-- 用户输入区域 -->
    <div class="input-area">
      <input 
        type="number" 
        v-model.number="userAnswer"
        placeholder="请输入计算结果"
        class="verification-input"
        @keyup.enter="checkAnswer"
      />
      <button class="verify-btn" @click="checkAnswer">
        验证
      </button>
    </div>
    
    <!-- 验证结果提示 -->
    <div v-if="feedback !== ''" class="feedback" :class="{ success: isVerified, error: !isVerified && feedback !== '' }">
      {{ feedback }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

// 定义组件属性
interface Props {
  // 难度级别：easy(加减，1-10), medium(加减乘，1-20), hard(加减乘除，1-30)
  difficulty?: 'easy' | 'medium' | 'hard'
  // 是否自动生成新算式在验证失败后
  autoRefresh?: boolean
  // 是否显示刷新按钮
  showRefresh?: boolean
}

// 定义组件事件
interface Emits {
  // 验证成功事件
  (e: 'verify-success'): void
  // 验证失败事件
  (e: 'verify-fail'): void
  // 验证状态变化事件
  (e: 'status-change', verified: boolean): void
}

// 定义默认属性
const props = withDefaults(defineProps<Props>(), {
  difficulty: 'medium',
  autoRefresh: true,
  showRefresh: true
})

const emit = defineEmits<Emits>()

// 响应式数据
const userAnswer = ref<number | null>(null)
const feedback = ref('')
const isVerified = ref(false)

// 算式相关数据
const firstNumber = ref(0)
const secondNumber = ref(0)
const operator = ref('')
const correctAnswer = ref(0)

// 计算属性：生成显示的算式字符串
const equation = computed(() => {
  return `${firstNumber.value} ${operator.value} ${secondNumber.value} = ?`
})

// 生成随机数函数
const getRandomNumber = (max: number): number => {
  return Math.floor(Math.random() * max) + 1
}

// 获取随机运算符函数
const getRandomOperator = (): string => {
  const operators: string[] = []
  
  // 根据难度级别决定可用运算符
  operators.push('+', '-')
  if (props.difficulty !== 'easy') {
    operators.push('×')
  }
  if (props.difficulty === 'hard') {
    // 除法需要确保能整除，后面会处理
    operators.push('÷')
  }
  
  // 确保数组不为空并返回一个确定的字符串
  const randomIndex = Math.floor(Math.random() * operators.length);
  return operators[randomIndex] || '+' // 提供默认值以防万一
}

// 生成新算式函数
const generateNewEquation = () => {
  // 重置状态
  userAnswer.value = null
  feedback.value = ''
  isVerified.value = false
  
  // 根据难度设置数字范围
  let maxNumber = 10
  if (props.difficulty === 'medium') maxNumber = 20
  if (props.difficulty === 'hard') maxNumber = 30
  
  // 获取运算符
  operator.value = getRandomOperator()
  
  // 特殊处理减法和除法，确保结果合理
  if (operator.value === '-') {
    // 确保减法结果为正数或零
    secondNumber.value = getRandomNumber(maxNumber)
    firstNumber.value = secondNumber.value + getRandomNumber(maxNumber)
    correctAnswer.value = firstNumber.value - secondNumber.value
  } else if (operator.value === '÷') {
    // 确保除法结果为整数且不为零
    secondNumber.value = getRandomNumber(maxNumber / 2)
    correctAnswer.value = getRandomNumber(maxNumber / 3)
    firstNumber.value = secondNumber.value * correctAnswer.value
  } else if (operator.value === '+') {
    firstNumber.value = getRandomNumber(maxNumber)
    secondNumber.value = getRandomNumber(maxNumber)
    correctAnswer.value = firstNumber.value + secondNumber.value
  } else if (operator.value === '×') {
    // 乘法使用较小的数字范围
    const maxMultiplier = Math.min(maxNumber, 15)
    firstNumber.value = getRandomNumber(maxMultiplier)
    secondNumber.value = getRandomNumber(maxMultiplier)
    correctAnswer.value = firstNumber.value * secondNumber.value
  }
}

// 检查用户答案
const checkAnswer = () => {
  if (userAnswer.value === null) {
    feedback.value = '请输入计算结果'
    return
  }
  
  if (userAnswer.value === correctAnswer.value) {
    // 验证成功
    isVerified.value = true
    feedback.value = '验证成功！'
    emit('verify-success')
    emit('status-change', true)
  } else {
    // 验证失败
    isVerified.value = false
    feedback.value = '计算错误，请重试'
    emit('verify-fail')
    emit('status-change', false)
    
    // 如果设置了自动刷新，生成新算式
    if (props.autoRefresh) {
      setTimeout(() => {
        generateNewEquation()
      }, 1000)
    }
  }
}

// 组件挂载时生成第一个算式
onMounted(() => {
  generateNewEquation()
})
</script>

<style scoped>
.verification-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  max-width: 350px;
}

.equation-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background-color: #ffffff;
  border-radius: 6px;
  border: 1px solid #dee2e6;
  font-size: 18px;
  font-weight: 500;
  color: #212529;
}

.equation {
  font-family: 'Courier New', monospace;
}

.refresh-btn {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.refresh-btn:hover {
  background-color: #e9ecef;
}

.refresh-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.input-area {
  display: flex;
  gap: 8px;
  align-items: center;
}

.verification-input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 16px;
  transition: border-color 0.2s;
}

.verification-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.25);
}

.verify-btn {
  padding: 10px 20px;
  background-color: #667eea;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.verify-btn:hover {
  background-color: #5a67d8;
}

.verify-btn:active {
  transform: scale(0.98);
}

.feedback {
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}

.feedback.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.feedback.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}
</style>